<template>
  <view class="content">
    <navbar/>
    <Tabs :tab-list="TabList" :current-tab="current" @tabs="tabsChange" @touchLeft="touchstart">
      <TabPane>
        <u-list>
          <u-list-item v-for="(item, index) in listContent" :key="index">
            <view class="box">
              <img v-if="item.img" :src="item.img.split(',')[0]" alt="" class="NewsImg"/>
              <view style="text-align:right">
                <view class="newDetails">
                  <h3>{{ item.newsContentTitle }}</h3>
                  <view>{{ item.newsTypeName }}</view>
                </view>
                <view style="margin-top:20px">
                  <text>{{ parseTime(item.newsReleaseTime, '{y}-{m}-{d}') }}</text>
                  <text class="seePeople">{{ item.readingsNumber }}人阅读</text>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </TabPane>
      <TabPane>
        <u-list>
          <u-list-item v-for="(item, index) in listContent" :key="index">
            <view class="box">
              <img v-if="item.img" :src="item.img.split(',')[0]" alt="" class="NewsImg"/>
              <view style="text-align:right">
                <view class="newDetails">
                  <h3>{{ item.newsContentTitle }}</h3>
                  <view>{{ item.newsTypeName }}</view>
                </view>
                <view style="margin-top:20px">
                  <text>{{ parseTime(item.newsReleaseTime, '{y}-{m}-{d}') }}</text>
                  <text class="seePeople">{{ item.readingsNumber }}人阅读</text>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </TabPane>
      <TabPane>
        <u-list>
          <u-list-item v-for="(item, index) in listContent" :key="index">
            <view class="box">
              <img v-if="item.img" :src="item.img.split(',')[0]" alt="" class="NewsImg"/>
              <view style="text-align:right">
                <view class="newDetails">
                  <h3>{{ item.newsContentTitle }}</h3>
                  <view>{{ item.newsTypeName }}</view>
                </view>
                <view style="margin-top:20px">
                  <text>{{ parseTime(item.newsReleaseTime, '{y}-{m}-{d}') }}</text>
                  <text class="seePeople">{{ item.readingsNumber }}人阅读</text>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </TabPane>
      <TabPane>
        <u-list>
          <u-list-item v-for="(item, index) in listContent" :key="index">
            <view class="box">
              <img v-if="item.img" :src="item.img.split(',')[0]" alt="" class="NewsImg"/>
              <view style="text-align:right">
                <view class="newDetails">
                  <h3>{{ item.newsContentTitle }}</h3>
                  <view>{{ item.newsTypeName }}</view>
                </view>
                <view style="margin-top:20px">
                  <text>{{ parseTime(item.newsReleaseTime, '{y}-{m}-{d}') }}</text>
                  <text class="seePeople">{{ item.readingsNumber }}人阅读</text>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </TabPane>
    </Tabs>
  </view>
</template>

<script>
import Tabs from '@/components/Tabs/tabs.vue'
import TabPane from '@/components/Tabs/tabPane.vue'
import { newsPage, newsPageContent } from '@/api/newsPage/newsPage'

export default {
  components: {
    Tabs,
    TabPane
  },
  data() {
    return {
      title: 'Hello',
      current: 0,
      TabList: [],
      limit: 8,
      listContent: []
    }
  },
  onLoad() {
    // 获取上导航栏标题
    this.getnewsPage()
  },
  methods: {
    getnewsPage() {
      newsPage().then((res) => {
        this.TabList = JSON.parse(JSON.stringify(res.data.data).replace(/newsTypeName/g, 'name'))
        this.getNewsContent(this.TabList[0].id)
      })
    },
    touchstart(touchCurrent) {
      this.getNewsContents(this.TabList[touchCurrent], touchCurrent)
    },
    tabsChange(index, id) {
      this.current = index
      this.getNewsContent(id)
    },
    getNewsContents(data, i) {
      if (data) {
        this.listContent = []
        newsPageContent({
          newsTypeId: data.id,
          page: 1,
          limit: this.limit
        }).then((res) => {
          const lists = res.data.data
          lists.map((item) => {
            if (data.id === item.newsTypeId) {
              if (item) {
                this.listContent.push(item)
                return this.listContent
              }
            }
          })
        })
      }
    },
    // 获取本页面新闻列表
    getNewsContent(id) {
      this.listContent = []
      newsPageContent({
        newsTypeId: id,
        page: 1,
        limit: this.limit
      }).then((res) => {
        const list = res.data.data
        list.map((item) => {
          if (id === item.newsTypeId) {
            if (item) {
              this.listContent.push(item)
              return this.listContent
            }
          }
        })
      })
    }

  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.NewsImg {
  width: 115px;
  height: 86px;
  border-radius: 5px;
  margin-top: 4px;
}

</style>
